<template>
  <div>
    <div class="TopRecommend">
      <div class="TopT">
        <svg
          class="icon"
          aria-hidden="true"
          @click="$store.commit('recommend/ISRECOMMEND', false)"
        >
          <use xlink:href="#icon-zuojiantou"></use>
        </svg>
        <span style="color: #999">默认推荐</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-youcecaidan"></use>
        </svg>
      </div>
    </div>
    <div class="NewDay">{{ month }}/{{ day }}</div>
    <div class="FooterRecommend">
      <div class="musicContentTop">
        <div class="playAllMusic" @click="playAll">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-bofang"></use>
          </svg>
          <span
            >播放全部<i>(共{{ dailySongs.length }}首)</i></span
          >
        </div>
      </div>
      <div class="musicContentFooter">
        <ul>
          <li v-for="(song, index) in dailySongs" :key="song.id">
            <img :src="song.al.picUrl" alt="" />
            <div class="musicNameAndAuthor" @click="playXMusic(index)">
              <span class="musicName">{{ song.name }}</span>
              <div class="allName">
                <i
                  style="
                    font-style: normal;
                    opacity: 0.5;
                    margin-top: 0.15rem;
                    font-size: 0.25rem;
                    margin-right: 0.2rem;
                  "
                  v-for="ar in song.ar"
                  :key="ar.id"
                  >{{ ar.name }}</i
                >
              </div>
            </div>
            <div class="twoIcon">
              <svg class="icon" aria-hidden="true" v-if="song.mv">
                <use xlink:href="#icon-24gl-playSquare"></use>
              </svg>
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-caidan"></use>
              </svg>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive, computed, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    //vuex
    let { state, commit, dispatch } = useStore();
    //数据
    let states = reactive({
      dailySongs: computed(() => state.recommend.dailySongs),
      month: computed(() => {
        const date = new Date();
        let m = date.getMonth() + 1;
        return m;
      }),
      day: computed(() => {
        const date = new Date();
        let d = date.getDate();
        return d;
      }),
    });

    //发请求 触发vuex 保存每日推荐歌曲
    onMounted(() => {
      dispatch("recommend/getRecommend");
    });

    //方法 更换歌曲
    function playXMusic(index) {
      commit("UPDATEPLAYLIST", { list: states.dailySongs, index });
      dispatch("getMusicLyric", states.dailySongs[index].id);
    }

    //方法 播放全部音乐
    function playAll() {
      commit("UPDATEPLAYLIST", { list: states.dailySongs, index: 0 });
    }

    return { playXMusic, ...toRefs(states), playAll };
  },
};
</script>

<style lang="less" scoped>
.TopRecommend {
  width: 100%;
  height: 3rem;
  background: url("@/assets/3.jpg") no-repeat;
  background-size: 100%;
  .TopT {
    position: fixed;
    display: flex;
    width: 100%;
    height: 0.8rem;
    justify-content: space-between;
    align-items: center;
    background: url("@/assets/3.jpg") no-repeat;
    background-size: 100%;
    padding: 0.04rem 0.1rem;
    .icon {
      fill: #fff;
    }
  }
}
.NewDay {
  position: absolute;
  top: 2.3rem;
  left: 0.2rem;
  color: rgb(171, 157, 165);
  font-size: 0.6rem;
}
.FooterRecommend {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 0.4rem;
  border-top-right-radius: 0.4rem;
  padding-top: 0.2rem;
  .musicContentTop {
    display: flex;
    justify-content: space-between;
    .playAllMusic {
      margin-left: 0.2rem;
      display: flex;
      align-items: center;
      .icon {
        fill: rgba(117, 112, 112, 0.729);
      }
      span {
        font-weight: 900;
        margin-left: 0.2rem;
        i {
          font-style: normal;
          font-weight: normal;
          font-size: 0.25rem;
          opacity: 0.5;
        }
      }
    }
    .collectionMusic {
      display: flex;
      align-items: center;
      width: 2.1rem;
      height: 0.7rem;
      background-color: red;
      border-radius: 0.4rem;
      margin-right: 0.2rem;
      .icon {
        fill: #fff;
        width: 0.4rem;
      }
      span {
        margin: 0 0.1rem 0 0.1rem;
        color: #fff;
        font-size: 0.25rem;
      }
    }
  }
  .musicContentFooter {
    margin-top: 0.3rem;
    ul li {
      display: flex;
      justify-content: space-between;
      line-height: 100%;
      padding-left: 0.2rem;
      margin-top: 0.25rem;
      img {
        width: 0.5rem;
        height: 0.5rem;
      }
      .musicNameAndAuthor {
        flex: 2;
        margin-left: 0.1rem;
        display: flex;
        flex-direction: column;
        .musicName {
          width: 5.5rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .allName {
        width: 2.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .twoIcon {
        flex: 0.5;
        .icon:first-child {
          float: left;
        }
        .icon:last-child {
          float: right;
          margin-right: 0.2rem;
        }
      }
    }
  }
}
</style>